import { Grid, OrbitControls } from "@react-three/drei";
import { useControls } from "leva";
import { Perf } from "r3f-perf";
import { useEffect } from "react";
import ToneSet from "./toneSet";
import { useDebug } from "@/stores/debug";
import Tractor from "./tractor";
import { Color } from "three";

/**
 * 调试面板
 */
export default function DebugPanel() {
  const target = useDebug((state) => state.target);
  const { 碰撞网格, 性能监控, 辅助线, 光晕 } = useControls(
    "辅助工具",
    {
      碰撞网格: false,
      性能监控: true,
      辅助线: false,
      光晕: false, // 后期处理
    },
    { collapsed: true, order: 1 }
  );
  useEffect(() => {
    useDebug.setState({
      showCollider: 碰撞网格,
      effects: 光晕,
    });
  }, [碰撞网格, 光晕]);

  return (
    <group>
      <OrbitControls makeDefault />

      {辅助线 && (
        <>
          <axesHelper args={[300]} />
          <Grid
            args={[300, 300]}
            sectionColor={new Color(0.5, 0.5, 10)}
            cellColor={"gray"} // 网格颜色灰色
            position={[0, 0, 0]}
            userData={{ camExcludeCollision: true }} // 不会与相机碰撞
          />
        </>
      )}
      {性能监控 && <Perf position="top-left" />}
      {!光晕 && <ToneSet />}
      {target && <Tractor object={target} />}
    </group>
  );
}
